<template>
    <el-drawer
            :visible.sync="dialogVisible"
            :size="width"
            :wrapperClosable="false"
            :withHeader="false"
            :style="body?'':'position:absolute'"
            :append-to-body="body">
        <el-container style="height: 100%;">
            <el-header style="height: auto;">
                <slot  name="header" :data="data"></slot>
            </el-header>
            <el-main class="xl-main" style="overflow-x: hidden;padding: 5px;">
                <slot :data="data"></slot>
            </el-main>
            <el-footer style="height: auto;">
                <slot  name="footer" :data="data"></slot>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>

export default {
  name: 'cu-drawer',
  components: {  },
  data() {
    return {
      dialogVisible: false,
      data: {}
    }
  },
  props: {
    width: {
      type: String,
      default: '40%'
    },
    body: false,
  },
  watch: {
    params: {
      handler(nv, o) {
        if (nv.data) {

        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    show(data) {
      this.data = data;
      this.dialogVisible = true;
    },
    backClose() {
      this.$emit('close');
      this.data={};
      this.dialogVisible = false;
    }
  },
  computed: {
    params() {
      return this.$store.state.home.params || {};
    }
  },
}
</script>

<style scoped>

</style>
